<!--
 * @Author: chen qi
 * @Date: 2022-07-09 16:20:08
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-11 17:55:20
 * @Description:
-->
<template>
  <div
    class="line-chart"
    :ref='`line${id}`'
  >

  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'lineChart',
  props: {
    id: {
      type: [Number, String],
      default: 1
    }
  },
  mixins: [commonMixin],
  data() {
    return {
      chart: null,
      resDebounce: null,
      option: {
        tooltip: { show: true },
        legend: {
          show: true
        },
        xAxis: {
          axisTick: {
            alignWithLabel: true
          },
          boundaryGap: true,
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {
          type: 'value',

          splitLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '充值订单数量',
            smooth: true,
            data: [150, 230, 224, 218, 135, 147],
            type: 'line',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            itemStyle: {
              color: '#3974d8'
            },
            lineStyle: {
              color: '#3974d8',
              opacity: 1,
              width: 1,
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#3974d8' // 0% 处的颜色
                }, {
                  offset: 1, color: '#161c2d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: '消费订单数量',
            smooth: true,
            data: [120, 130, 200, 118, 123, 123],
            type: 'line',
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            itemStyle: {
              color: '#1ac397'
            },
            lineStyle: {
              color: '#1ac397',
              opacity: 1,
              width: 1,
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#1ac397' // 0% 处的颜色
                }, {
                  offset: 1, color: '#161c2d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`line${this.id}`])
    this.chart.setOption(this.option)
    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  destroyed() {
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.line-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
